import JoyrideGuide from '@/pages/components/joyride-guide';
import { Layout } from 'antd';
import type { TabsProps } from 'antd';
import useWindowWidth from '@/hooks/event/use-window-width';
import '@/pages/workbench/style/index.css';
import { Tabs } from 'antd';

import HistoryChat from '@/pages/app-fusion/components/fusion-history';
import { historicalDialogueType, MenuContentType } from '@/common';

interface fusionProps {
  handleChatItemClick: (data: historicalDialogueType) => void;
  deleteHistoryDialogue?: (event: any, data: historicalDialogueType) => void;
  setContentType?: (contentType: MenuContentType) => void;
  isSearch?: string | null;
  isDeleteChatHistory?: boolean;
  dataId?: string[];
}

export default function FusionHistoryChat({
  handleChatItemClick,
  deleteHistoryDialogue,
  setContentType,
  isSearch,
  isDeleteChatHistory,
  dataId,
}: fusionProps) {
  const { isPc } = useWindowWidth();
  const { Header, Content } = Layout;

  const items: TabsProps['items'] = [
    {
      key: '4',
      label: '历史对话',
      children: (
        <HistoryChat
          onChangeChatItem={handleChatItemClick}
          isDeleteChatHistory={isDeleteChatHistory}
          dataId={dataId}
          deleteHistoryDialogue={deleteHistoryDialogue}
          setContentType={setContentType}
          isSearch={isSearch}
        />
      ),
    },
  ];

  return (
    <>
      <JoyrideGuide />
      <Layout className="m-auto size-full flex-grow  flex-row">
        <Layout>
          <Content style={{ background: '#F3F5F9', padding: 0 }}>
            <Header
              style={
                isPc
                  ? { background: '#F3F5F9', padding: 0 }
                  : { background: '#F3F5F9', padding: '0' }
              }
            >
              {isPc ? (
                <Tabs
                  centered={isPc ? false : true}
                  // defaultActiveKey="1"
                  items={items}
                  className="work-tabs"
                  tabBarStyle={{
                    borderBottom: '1px solid #e6e6e6',
                    color: 'red',
                  }}
                />
              ) : (
                <HistoryChat
                  onChangeChatItem={handleChatItemClick}
                  isDeleteChatHistory={isDeleteChatHistory}
                  dataId={dataId}
                  deleteHistoryDialogue={deleteHistoryDialogue}
                  setContentType={setContentType}
                  isSearch={isSearch}
                />
              )}
            </Header>
          </Content>
        </Layout>
      </Layout>
    </>
  );
}
